import React from 'react'
import { Route } from "react-router-dom";

import index from "../index"; // 资讯
import news from "../news"; // 资讯
import list from "../list"; // 找房
import my from "../my"; // 找房
import { TabBar } from 'antd-mobile'; // ul 库

// 自己的css
import './home.css'
export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname ,
  }
  render() {
    
    return (
      <div className='home'>
        <Route exact path='/home' component={index}></Route>
        <Route path='/home/news' component={news}></Route>
        <Route path='/home/list' component={list}></Route>
        <Route path='/home/my' component={my}></Route>

        {/* tabbar 组件 */}
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent={true}
        >
          <TabBar.Item
            icon={<i className='iconfont icondibutubiao_shouye'></i>}
            selectedIcon={<i className='iconfont icondibutubiao_shouye'></i>}
            title="首页"
            key="首页"
            selected={this.state.selectedTab === '/home'}
            onPress={() => {
              this.setState({
                selectedTab: '/home',
              });

              // 路由跳转
              this.props.history.push('/home')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont iconsousuo'></i>}
            selectedIcon={<i className='iconfont iconsousuo'></i>}
            title="找房"
            key="找房"
            selected={this.state.selectedTab === '/home/list'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/list',
              });

               // 路由跳转
               this.props.history.push('/home/list')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont iconzixun'></i>}
            selectedIcon={<i className='iconfont iconzixun'></i>}
            title="资讯"
            key="资讯"
            selected={this.state.selectedTab === '/home/news'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/news',
              });

              // 路由跳转
              this.props.history.push('/home/news')
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={<i className='iconfont iconwode'></i>}
            selectedIcon={<i className='iconfont iconwode'></i>}
            title="我的"
            key="我的"
            selected={this.state.selectedTab === '/home/my'}
            onPress={() => {
              this.setState({
                selectedTab: '/home/my',
              });

               // 路由跳转
               this.props.history.push('/home/my')
            }}
          >
          </TabBar.Item>
        </TabBar>

      </div>
    )
  }
}